<template>
  <div class="login flex justify-center align-center">
    <el-row>
      <el-col>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          class="demo-ruleForm"
        >
          <el-form-item prop="username">
            <el-input
              v-model="ruleForm.username"
              placeholder="请输入用户名"
              prefix-icon="el-icon-user"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="ruleForm.password"
              placeholder="请输入密码"
              prefix-icon="el-icon-lock"
              clearable
              show-password
            ></el-input>
          </el-form-item>
          <div>
            <el-button type="primary" @click="login('ruleForm')"
              >登录</el-button
            >
          </div>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { api_login } from "./../api/index";
import {LOGIN_IN} from './../store/mutations-types'
export default {
  data() {
    return {
      ruleForm: {
        username: "admin",
        password: "123456",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 40,
            message: "长度在 3 到 12 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    login:async function(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 登录
          api_login(this.ruleForm).then((res) => {
            if (res.meta.status == 200) {
              this.$store.commit(LOGIN_IN, res.data);
              this.$router.push('/')
            } else {
              this.$message.error(res.meta.msg);
            }
          });
        } else {
          this.$message.error("请输入");
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  background: #2b4b6b;
  .el-row {
    width: 450px;
    height: 240px;
    padding: 40px 10px;
    border-radius: 5px;
    background: hsla(0, 0%, 100%, 0.418);
  }
  .el-col {
  }
}
</style>